<template>
	<view class="">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'订单详情',color:'#fff'}" />
		<!-- #endif -->
		<view class="order_detail">

			<view class="top_background">
				<text class="title">{{orderDetail.status_text}}</text>
			</view>
			<!-- 订单状态 -->

			<view class="top">

				<view class="steps">
					<view class="">
						<view class="image" :class="{'order_type_chex': index >= 1}">
							<image :src="index>=1?url+'receive2.png':url+'receive.png'" mode=""></image>
						</view>
						<text>技师接单</text>
					</view>
					<view class="">
						<view class="image" :class="{'order_type_chex': index >=2}">
							<image :src="index >= 2?url+'go2.png':url+'go.png'" mode=""></image>
						</view>
						<text>技师出发</text>
					</view>
					<view class="">
						<view class="image" :class="{'order_type_chex':index >=3}">
							<image :src="index >= 3?url+'arrive2.png':url+'arrive.png'" mode=""></image>
						</view>

						<text>技师到达</text>
					</view>
					<view class="">
						<view class="image" :class="{'order_type_chex':index >=4}">
							<image :src="index >= 4?url+'startSever2.png':url+'startSever.png'" mode=""></image>
						</view>
						<text>开始服务</text>
					</view>
					<view class="">
						<view class="image" :class="{'order_type_chex':index >=5}">
							<image :src="index >= 5?url+'finish2.png':url+'finish.png'" mode=""></image>
						</view>

						<text>服务完成</text>
					</view>
				</view>
			</view>
			<!-- 买家信息 -->
			<view class="user_detail">
				<view class="left">
					<p>
						<image style="width: 14px;height: 17px;margin-right:10px;"
							src="/static/images/orders/address.png" mode=""></image>
						<text>{{orderDetail.user_name}} &nbsp; {{orderDetail.user_phone}}</text>
					</p>
					<p class="address">{{orderDetail.user_address}}</p>
				</view>
				<view class="right" v-if="orderTypeId >= 2 && orderTypeId < 4 && orderDetail.user_cancel == 0"
					@click="contact">
					<uni-icons type="phone-filled" color="#24D576" size="22" style="margin-right: 5px;"></uni-icons>
					联系技师
				</view>
			</view>
			<!-- 项目信息 -->
			<view class="project_info">
				<view class="title">
					<view class="dot"></view>
					<text>服务项目</text>
				</view>
				<view class="content" v-if="orderDetail.order_info">
					<view class="" style="flex-direction: column;" v-for="(item,index) in orderDetail.order_info"
						:key="index">
						<view class="info_item" :class="[{'out_line':item.upgrade_order.length > 0}]">
							<view class="project">{{item.product_info.name}} <text> x{{item.product_info.num}}</text>
							</view>
							<view class="price">￥<font class="font">{{item.product_info.price}}</font>
							</view>
						</view>
						<view class="info_item upgrade_item" 
							:class="{'upgrade_item_none':_index == item.upgrade_order.length - 1}" 
							v-for="(items,_index) in item.upgrade_order" 
							:key="_index" 
							style="margin-top: 10px;" 
							v-if="item.upgrade_order">
							<view class="project" >
								{{items.product_info.name}}<text>
									x{{items.product_info.num}}</text> 
							</view>
							<view class="price">￥<font class="font">{{items.product_info.price}}</font>
							</view>
							<!-- <view class="project">{{item.upgrade_order.product_info.name}} <text>
									x{{item.upgrade_order.product_info.num}}</text> </view>
							<view class="price">￥<font class="font">{{item.upgrade_order.product_info.price}}</font>
							</view> -->
						</view>
					</view>
					<view class="charge_order" v-if="orderDetail.charge_order.length>0">
						<view class="product_add" v-for="(item,index) in orderDetail.charge_order" :key="index">
							<view class="product_item" v-for="(items,_index) in item.product_list" :key="_index">
								<view class="">
									<view class="project">{{items.name}} <text> x{{items.num}}</text> </view>
									<view class="title">(加)</view>
								</view>
								<view class="price">￥<font class="font">{{items.price}}</font>
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<text class="">服务总时长</text>
						<text class="right">{{orderDetail.service_duration}}分钟</text>
					</view>
					<view class="">
						<text class="">服务技师</text>
						<text class="right">{{orderDetail.technician_info.name}}</text>
					</view>
					<view class="">
						<text class="">服务时间</text>
						<text class="right">{{orderDetail.service_time}}</text>
					</view>
				</view>
			</view>
			<!-- 费用信息 -->
			<view class="cost_detail">
				<view class="title">
					<view class="dot"></view>
					<text>费用详情</text>
				</view>
				<view class="content">
					<view class="">
						<text class="">项目金额</text>
						<text class="right">￥{{orderDetail.total_price}}</text>
					</view>
					<view class="">
						<text class="">出行费用</text>
						<text class="right">￥{{orderDetail.travel_price}}</text>
					</view>
					<view class="">
						<text class="">优惠费用</text>
						<text class="right">￥{{orderDetail.coupon_price}}</text>
					</view>
					<view class="">
						<text class="">备注</text>
						<text class="right">{{orderDetail.user_remark}}</text>
					</view>
					<view class="">
						<text class="">支付方式</text>
						<text class="right">{{orderDetail.pay_type_text}}</text>
					</view>
					<view class="">
						<text class="">项目总价</text>
						<text class="right all_price">￥{{orderDetail.pay_price}}</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order">
				<view class="title">
					<view class="dot"></view>
					<text>订单信息</text>
				</view>
				<view class="content">
					<view class="">
						<text class="">订单编号</text>
						<text class="">{{orderDetail.order_no}}</text>
						<font @click="copy">复制</font>
					</view>
					<view class="">
						<text class="">下单时间</text>
						<text class="">{{orderDetail.create_time}}</text>
					</view>
					<view class="">
						<text class="">付款时间</text>
						<text class="">{{orderDetail.pay_time}}</text>
					</view>
				</view>
				<view class="order_type">
					<view class="type_item" v-for="(item,index) in orderType" :key="index">
						<view class="dot"></view>
						<view class="type_detail">
							<view class="type">
								{{item.change_message}}
							</view>
							<view class="time">
								{{item.create_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评价信息 -->
			<view class="evaluate" v-if="orderDetail.order_comment != null">
				<view class="title">
					<view class="dot"></view>
					<text>订单评价</text>
				</view>
				<view class="content">
					<view class="" style="align-items: center;">
						<text class="">评价星级</text>
						<uni-rate allow-half :max="5" size="16" color="#666" active-color="#fd5c5b" :is-fill="false"
							:touchable="false" :readonly="true" v-model="order_comment.score" />
					</view>
					<view class="" v-if="orderDetail.order_comment.tags.length > 0">
						<text class="">评价标签</text>
						<view class="tags">
							<view v-for="(item,index) in orderDetail.order_comment.tags" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="" v-if="orderDetail.order_comment.comment_text != ''">
						<text class="">评价内容</text>
						<view>{{orderDetail.order_comment.comment_text}}</view>
					</view>
					<view class="">
						<text class="">评价时间</text>
						<view class="">
							{{orderDetail.order_comment.create_time}}
						</view>
					</view>
					<view class="remove" @click="removeEva">
						删除评价
					</view>
				</view>
			</view>
			<!-- 加钟加项 -->
			<uni-popup v-if="flag" class="popup" ref="popup" type="bottom" :animation="true">
				<view class="project_nav">
					<text>
						项目列表
					</text>
					<text class="close_popup" @click="$refs.popup.close()">取消</text>
				</view>
				<view class="project_list">
					<view class="project_list_item" v-for="(item,index) in projectList" :key="index">
						<view class="image">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="project_content">
							<view class="project_detail">
								<view class="title">{{item.name}}</view>
								<view class="detail">{{item.detail}}</view>
								<view class="content">
									<view class="price">￥<text>{{item.price}}</text></view>
									<view class="time">
										<view class="time_image">
											<image src="/static/images/time.png" mode=""></image>
										</view>
										<text>{{item.duration}}分钟</text>
									</view>
								</view>
							</view>
							<view class="project_num">
								<uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)">
								</uni-icons>
								<text style="flex: 1;text-align: center;">{{item.projecNum}}</text>
								<uni-icons type="plus-filled" size="30" style="color: #00AC50;"
									@click="changeNum(index,2)">
								</uni-icons>
							</view>
						</view>
					</view>
					<view class="submit">
						<view class="all_price">合计：{{allPrice.toFixed(2)}}</view>
						<view class="submit_button" @click="goOrderPay">提交订单</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="pay_mode" type="bottom" :animation="true">
				<view class="pay_mode">
					<view class="mode">
						<view class="pay_mode_item" v-for="(item,index) in payModeList" :key="index">
							<view class="left">
								<view class="image">
									<image :src="item.url" mode=""></image>
								</view>
								<text>{{item.payName}}</text>
							</view>
							<radio-group @change="radioChange">
								<label class="radio">
									<radio :value="item.value" :checked="index === current" />
								</label>
							</radio-group>
						</view>
					</view>
					<view class="add_submit">
						<!-- <text class="submit_btn" @click="addSubmit">支付</text> -->
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 处理按钮 -->
		<view class="handle_button" v-if="orderDetail.user_cancel != 1">
			<view class="order_button one" v-if="orderDetail.status == -1">
				<view class="finish" @click="aginPay">再来一单</view>
			</view>
			<view class="order_button one" v-if="orderTypeId == 0">
				<view class="" @click="cancel">取消订单</view>
				<!-- <view class="finish" @click="payOrder">立即支付</view> -->
			</view>
			<view class="order_button one" v-if="orderTypeId == 1">
				<view class="" @click="cancel">取消订单</view>
			</view>
			<view class="order_button one" v-if="orderTypeId == -3">
				<view class="finish" @click="aginPay">重新购买</view>
			</view>
			<view class="order_button one" v-if="orderTypeId == 2">
				<view class="" @click="cancel">取消订单</view>
				<!-- <view class="finish">联系技师</view> -->
			</view>
			<view class="order_button one" v-if="orderTypeId == 3">
				<view class="" @click="cancel">取消订单</view>
				<!-- <view class="finish" @click="aginPay">再次购买</view> -->
			</view>
			<view class="order_button one" v-if="orderTypeId == 4">
				<view class="" @click="cancel">取消订单</view>
				<!-- <view class="finish">开始服务</view> -->
			</view>
			<view class="order_button two" v-if="orderTypeId == 5">
				<view class="finish" @click="upgrade">加钟升级</view>
				<view class="finish" @click="overOrder">完成订单</view>
				<!-- <view class="" @click="cancel">取消订单</view> -->
			</view>
			<view class="order_button two" v-if="orderTypeId == 6">
				<view class="finish" @click="goEvaluate">立即评价</view>
				<view class="finish" @click="aginPay">再次购买</view>
			</view>
			<view class="order_button again_button one" v-if="orderTypeId == 7">
				<view class="again_order" @click="aginPay">再来一单</view>
			</view>
		</view>
		<view class="handle_button" v-else>
			<view class="order_button one">
				<view class="finish" @click="aginPay">再次购买</view>
			</view>
		</view>
		<fui-bottom-popup :show="pay" @close="closePopup">
			<view class="fui-custom__wrap">
				<view class="payy" v-if="pay">
					<!-- 遮罩层 -->
					<view class="top_seat" @click="nopay"></view>
					<view class="content">
						<view class="head">
							<view class="money">
								请支付<text>￥{{payOrder.pay_price}}</text>
							</view>
							<view class="cancel" @click="nopay">
								取消
							</view>
						</view>
						<view class="payList">
							<view class="list" @click="paySubmit('yue')">
								<image src="https://oos.kmey.cn/21/23fc82d867562ab979a08dee28e20b.png" mode=""></image>
								<text>账户余额</text>
							</view>
							<view class="list" @click="paySubmit('weixin')">
								<image src="https://oos.kmey.cn/50/226d0a7918294ab838621ac05186cc.png" mode=""></image>
								<text>微信支付</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</fui-bottom-popup>
		<!-- 悬浮按钮 -->
		<fui-fab background="rgb(36, 213, 118)" bottom="620" width="80" distance="20" position="right"
			@click="openGallery">
			<fui-icon name="comment-fill" color="#fff"></fui-icon>
		</fui-fab>
		<fui-dialog :show="show" :content="content" maskClosable @click="onCancel" @close="onClose"></fui-dialog>
	</view>

</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTitle from "@/components/topTitle.vue"
	export default {
		components: {
			topTitle
		},
		data() {
			return {
				index: 0,
				url: '/static/images/orders/',
				orderTypeId: 0, //0:未付款  1:未接单  2:已取消 3:已接单 4:已出发 5:已到达 6:已开始 7:已评价 8:已完成
				orderDetail: {},
				orderId: "",
				flag: false,
				pay: false,
				projectList: [],
				payModeList: [{
						value: '0',
						url: '/static/images/orders/yue.png',
						payName: '账户余额',
					},
					{
						value: '1',
						url: '/static/images/orders/wx.png',
						payName: '微信支付',
					},
				],
				current: 0,
				orderType: [],
				order_comment: {},
				show: false,
				content: '',
				serviceUrl:'',		//客服链接
			};
		},
		onLoad(option) {
			console.log(option, '............................option')
			this.orderId = option.id
			this.getForce()
		},
		onShow() {
			this.getOrderDetail()
		},
		computed: {
			allPrice() {
				var price = 0
				this.projectList.forEach((item, index) => {
					if (item.num != 0) {
						price += Number(item.projecNum) * Number(item.price)
					}
				})
				return price
			}
		},
		methods: {
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.serviceUrl = result.data.service_url
					}
				})
			},
			openGallery() {
				let url = this.serviceUrl
				if(url == ''){
					return false;
				}
				// #ifdef H5
				if (uni.getSystemInfoSync().platform == 'android') { //android终端
					window.open(url);
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					window.location.href = url;
				}
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(encodeURI(url), err => {
					console.log(err)
				})
				// #endif
			},
			upgrade() {
				uni.navigateTo({
					url: `/pages/orders/upgrade/upgrade?data=${JSON.stringify(this.orderDetail.order_info)}&id=${this.orderDetail.technician_id}`
				})
			},
			//删除评价
			removeEva() {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除该订单吗?',
					success: res => {
						if (res.confirm) {
							this.$http({
								url: `/api/product/order/delete_comment/${this.orderDetail.order_comment.id}`,
								method: 'post',
								success: result => {
									console.log(result)
									uni.showToast({
										title: result.msg
									})
									this.getOrderDetail()
								}
							})
						}
					}
				})

			},
			//结束订单
			overOrder() {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要提前完成服务吗?',
					success: res => {
						if (res.confirm) {
							this.$http({
								url: `/api/product/order/complete/${this.orderDetail.id}`,
								method: 'post',
								success: result => {
									console.log(result)
									uni.showToast({
										title: result.msg
									})
									this.getOrderDetail()
								}
							})
						}
					}
				})
			},
			//联系技师
			contact() {
				this.$http({
					url: `/api/user/get_secret_no/${this.orderDetail.id}`,
					method: 'get',
					success: result => {
						console.log(result)
						if (result.code == 200) {
							uni.makePhoneCall({
								phoneNumber: result.data.info.secret_no
							})
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}

					}
				})
			},
			//  加钟/加项
			addClock() {
				this.getProject();
				this.flag = true;
				setTimeout(() => {
					this.$refs.popup.open()
				}, 100)
			},
			//项目数量修改
			changeNum(index, i) {
				if (i == 1) { //1代表减少
					if (this.projectList[index].projecNum > 0) {
						this.projectList[index].projecNum--
					} else {
						this.projectList[index].projecNum = 0
					}
				} else {
					this.projectList[index].projecNum++
				}
			},
			//加钟支付跳转
			goOrderPay() {
				var arr = this.projectList.filter(el => {
					return el.projecNum > 0
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '未选择项目',
						icon: "none"
					})
					return false;
				}
				console.log(this.orderDetail, '------------------------------orderDetail')
				let data = {
					orderId: this.orderDetail.id,
					technician: this.orderDetail.technician_info,
					project: arr
				}
				uni.setStorageSync('addProject', JSON.stringify(data))
				this.$refs.popup.close()
				uni.navigateTo({
					url: `/pages/orders/addItem/addItem`
				})
			},
			//支付方式单选
			radioChange(e) {
				this.payModeList.forEach((item, index) => {
					if (e.detail.value == item.value) {
						this.current = index
					}
				})
			},
			//加项支付弹窗
			addPay() {
				this.$refs.pay_mode.open()
			},
			//加项支付
			addSubmit() {
				this.$http({
					url: `/api/product/charge_order/pay/${this.orderDetail.charge_order.id}`,
					method: 'post',
					data: {
						pay_tpe: this.current == 0 ? 'yue' : 'weixin'
					},
					success: result => {
						console.log(result, '----------------------加项支付')
					}
				})
			},
			//取消加项
			cancelAdd() {
				uni.showModal({
					title: '您确定取消加项订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.$http({
								url: `/api/product/charge_order/cancel/${this.orderDetail.charge_order.id}`,
								method: 'post',
								data: {
									"pay_type": "weixin"
								},
								success: result => {
									console.log(result, '-------------------------取消加项')
									if (result.code == 200) {
										uni.showToast({
											title: result.msg
										})
										this.getOrderDetail()
									}
								}
							})
						}
					}
				})
			},
			//获取服务列表
			getProject() {
				this.$http({
					url: `/api/product/list?page=${this.page}&limit=${this.limit}`,
					method: '',
					success: result => {
						let data = result.data.list
						data.forEach((item, index) => {
							item.projecNum = 0 //每条数据添加数量字段  sales：销量    projecNum：当前服务项目的数量
						})
						this.projectList = data
					}
				})
			},
			//获取订单详情
			getOrderDetail() {
				this.$http({
					url: `/api/product/order/info/${this.orderId}`,
					method: 'get',
					success: result => {
						console.log(result, '-----------------------123123')
						this.orderDetail = result.data.info
						this.orderTypeId = result.data.info.status
						this.orderType = result.data.info.order_status
						this.order_comment = result.data.info.order_comment
						let status = result.data.info.status
						switch (status) {
							case 2:
								this.index = 1
								break;
							case 3:
								this.index = 2
								break;
							case 4:
								this.index = 3
								break;
							case 5:
								this.index = 4
								break;
							case 6:
								this.index = 5
								break;
							case 7:
								this.index = 5
								break;
							case 8:
								this.index = 5
								break;
							default:
								this.index = 0
								break;
						}
					}
				})
			},
			//复制订单号
			copy() {
				uni.setClipboardData({
					data: this.orderDetail.order_no,
					success: () => {
						uni.hideToast()
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				})
			},
			//取消订单
			cancel() {
				this.$http({
					url: `/api/product/order/cancel_tips/${this.orderDetail.id}`,
					method: 'post',
					success: result => {
						console.log(result, '--------------------------------取消订单')
						if (result.data.info.tips == '') {
							//已开始
							uni.navigateTo({
								url: '/pages/orders/cancelOrder/cancelOrder?id=' + this.orderDetail.id
							})
						} else {
							this.content = result.data.info.tips
							this.show = true;
						}
					}
				})
				return false;


			},
			onCancel(e) {
				if (e.index == 1) {
					this.show = false;
					//已开始
					uni.navigateTo({
						url: '/pages/orders/cancelOrder/cancelOrder?id=' + this.orderDetail.id
					})
				} else {
					this.onClose()
				}
			},
			onClose() {
				this.show = false;
			},
			//支付
			payOrder() {
				this.pay = true;
				return false;
				this.$http({
					url: `/api/product/order/pay/${this.orderId}`,
					method: 'post',
					data: {
						"pay_type": "weixin"
					},
					success: result => {
						console.log(result)
						let data = result.data.js_config
						// #ifdef H5
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data
								.timestamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
							nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
							signType: data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
							jsApiList: ['invoke'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						wx.invoke(
							'getBrandWCPayRequest', {
								"appId": data.appId, //公众号ID，由商户传入     
								"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": data.nonceStr, //随机串     
								"package": data.package,
								"signType": data.signType, //微信签名方式：     
								"paySign": data.paySign, //微信签名 
							}, () => {
						
							}
						
						)
						// #endif
					}
				})
			},
			getTechInfo(id) {
				this.$http({
					url: `/api/technician/info/${id}`,
					method: '',
					success: result => {
						console.log(result)
						this.technician_info = result.data.info
					}
				})
			},
			//再次购买
			aginPay() {
				let object = this.orderDetail;
				this.getTechInfo(this.orderDetail.technician_id)
				setTimeout(() => {
					let arr = object.order_info;
					let products = [];
					arr.forEach((item, index) => {
						this.$http({
							url: `/api/product/info/${item.product_id}`,
							method: 'get',
							success: result => {
								console.log(result, '-----------------123')
							}
						})
						products.push({
							product_id: item.product_id,
							num: item.num
						})
					})
					let data = {
						products,
						technician_id: object.technician_id
					}
					let orderDetail = {
						data,
						technician: this.technician_info,
						project: arr
					}
					console.log(orderDetail, '---------------123123123')
					// return false;
					uni.setStorageSync('orderDetail', JSON.stringify(orderDetail))
					uni.navigateTo({
						url: `/pages/orders/orderPay/orderPay`
					})
				}, 1000);
			},
			//评价
			goEvaluate() {
				console.log(this.orderDetail, '--------------------111')
				let evaluateData = {
					orderId: this.orderDetail.id,
					technician: this.orderDetail.technician_info
				}
				uni.setStorageSync('evaluateData', JSON.stringify(evaluateData))
				uni.navigateTo({
					url: `/pages/orders/evaluate/evaluate`
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.order_detail {
		width: 100%;
		height: 100%;

		>view {
			margin: 16px 12px;
			background-color: #fff;
			border-radius: 8px;
		}

		.top_background {
			height: 180upx;
			background: #25c376;
			margin: 0;
			border-radius: 0;
			padding: 20px 0;
			box-sizing: border-box;

			.title {
				font-weight: bold;
				margin: 19px;
				color: #fff;
				font-size: 18px;
			}
		}

		.top {
			margin-top: -70upx;
			height: 100px;
			// margin: 16px 12px;
			// background-color: #fff;
			padding: 16px 10px;

			// .title {
			// 	margin: 10px;
			// 	font-weight: bold;
			// }

			.steps {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: 12px;
				margin-top: 20px;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					position: relative;

					>text {
						text-align: center;
						width: 80px;
						position: absolute;
						font-size: 10px;
						bottom: -25px;
					}

					.image {
						width: 43px;
						height: 43px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						>image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.user_detail {
			height: 72px;
			// border-radius: 8px;
			// margin: 16px 12px;
			// background-color: #fff;
			padding: 16px 25px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			>p {
				display: flex;
				align-items: center;
			}

			.right {
				display: flex;
				align-items: center;
			}

			.address {
				font-size: 12px;
			}
		}

		.project_info {
			// height: 168px;
			padding: 16px 25px;
			box-sizing: border-box;

			.title {
				display: flex;
				align-items: center;

				.dot {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #35ECA0;
					margin-right: 8px;
				}

				>text {
					font-size: 16px;
					color: #212121;
					font-weight: bold;
				}
			}

			.content {
				margin-top: 15px;

				>view {
					display: flex;
					justify-content: space-between;
					color: #7B7B7B;
					font-size: 14px;
					margin: 5px 0;

					.out_line {
						text-decoration: line-through;
					}

					.info_item {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.upgrade_item{
						text-decoration: line-through;
					}
					.upgrade_item_none{
						text-decoration: none;
					}
					.project {
						font-size: 16px;
						color: #404040;
						// font-weight: 600;
						display: flex;

						text {
							font-size: 14px;
							font-weight: 400;
							margin-left: 5px;
						}
					}

					.price {
						color: #fd5c5b;
						// font-weight: bold;

						.font {
							font-size: 16px;
						}
					}

					.right {
						color: #000;
					}
				}

				.charge_order {
					flex-direction: column;

					>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 5upx 0;

						>view {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;

							>view {
								display: flex;
								align-items: center;

								>.title {
									margin-left: 10upx;
									color: #fd5c5b;
									font-size: 22upx;
								}
							}
						}

						.product_item {
							// flex: 1;
						}
					}

					.product_add {
						flex-direction: column;
						align-items: unset;
					}
				}
			}
		}

		.cost_detail {
			// height: 155px;
			padding: 16px 25px;

			.title {
				display: flex;
				align-items: center;

				.dot {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #35ECA0;
					margin-right: 8px;
				}

				>text {
					font-size: 16px;
					color: #212121;
					font-weight: bold;
				}
			}

			.content {
				margin-top: 15px;

				>view {
					display: flex;
					justify-content: space-between;
					color: #7B7B7B;
					font-size: 14px;
					margin: 5px 0;

					.right {
						color: #000;
					}

					.all_price {
						font-size: 28upx;
						font-weight: bold;
						color: #fd5c5b;
					}
				}

			}
		}

		.order {
			// height: 117px;
			padding: 16px 25px;

			.title {
				display: flex;
				align-items: center;

				.dot {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #35ECA0;
					margin-right: 8px;
				}

				>text {
					font-size: 16px;
					color: #212121;
					font-weight: bold;
				}
			}

			.content {
				margin-top: 15px;

				>view {
					display: flex;
					color: #7B7B7B;
					font-size: 14px;
					margin: 5px 0;

					text {
						margin-right: 15px;
					}

					.right {
						color: #000;
					}
				}
			}

			.order_type {
				padding: 10px 20upx;
				display: flex;
				flex-direction: column;

				.type_item {
					margin-bottom: 18upx;
					color: #18B568;
					display: flex;
					justify-content: space-between;

					.dot {
						width: 20upx;
						height: 20upx;
						background-color: #18B568;
						border-radius: 50%;
						margin-top: 10upx;
						margin-right: 16upx;
					}

					.type_detail {
						flex: 1;
						display: flex;
						align-items: center;

						.type {
							margin-right: 40upx;
						}
					}
				}
			}

		}

		.evaluate {
			padding: 16px 25px;

			.title {
				display: flex;
				align-items: center;

				.dot {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #35ECA0;
					margin-right: 8px;
				}

				>text {
					font-size: 16px;
					color: #212121;
					font-weight: bold;
				}
			}

			.content {
				margin-top: 15px;
				position: relative;

				>view {
					display: flex;
					color: #7B7B7B;
					font-size: 14px;
					margin: 5px 0;

					text {
						margin-right: 15px;
						width: 140upx;
					}

					>view {
						flex: 1;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;

						>view {
							padding: 5upx 10upx;
							border-radius: 10upx;
							// width: 25%;
							// margin-left:3%;
							background-color: #07CE67;
							color: #fff;
							margin: 5upx;
						}
					}

					.right {
						color: #000;
					}
				}

				.remove {
					position: absolute;
					bottom: -20upx;
					right: 0;
					padding: 5upx 20upx;
					border: 1px solid #707070;
					border-radius: 40upx;
				}
			}

			.order_type {
				padding: 10px 20upx;
				display: flex;
				flex-direction: column;

				.type_item {
					margin-bottom: 18upx;
					color: #18B568;
					display: flex;
					justify-content: space-between;

					.dot {
						width: 20upx;
						height: 20upx;
						background-color: #18B568;
						border-radius: 50%;
						margin-top: 10upx;
						margin-right: 16upx;
					}

					.type_detail {
						flex: 1;
						display: flex;
						align-items: center;

						.type {
							margin-right: 40upx;
						}
					}
				}
			}

		}

		.project_nav {
			padding: 10px 12px;
			font-size: 22px;
			font-weight: bold;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.close_popup {
				display: block;
				font-size: 16px;
				font-weight: 400;
				background-color: #24D576;
				color: #FFF;
				padding: 2px 10px;
				border-radius: 10px;

			}
		}

		.project_list {
			height: 400px;
			background-color: #fff;
			padding-bottom: 60px;
			overflow-y: auto;
			overflow-x: hidden;

			.project_list_item {
				height: 81px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				margin: 0 12px;
				padding: 5px 0;
				border-bottom: 1px solid #eee;

				.image {
					width: 89px;
					height: 69px;
					padding: 0 10px;

					>image {
						border-radius: 6px;
						width: 100%;
						height: 100%;
					}
				}

				.project_content {
					flex: 1;
					display: flex;

					.project_detail {
						flex: 1;
						display: flex;
						flex-direction: column;

						.title {
							font-size: 18px;
							font-weight: bold;
							color: #2e2e2e;
						}

						.detail {
							font-size: 12px;
						}

						.content {
							display: flex;
							align-items: center;

							.price {
								flex: 1;
								font-size: 14px;
								color: #fd5c5b;
								font-weight: bold;
								margin-right: 15px;

								>text {
									font-size: 20px;
								}
							}

							.time {
								width: 70px;
								display: flex;
								align-items: center;
								font-size: 14px;

								.time_image {
									width: 14px;
									height: 14px;

									>image {
										width: 100%;
										height: 100%;
										margin-bottom: 5px;
									}
								}

								>text {
									margin-left: 5px;
								}
							}
						}
					}

					.project_num {
						width: 75px;
						padding: 0 5px;
						display: flex;
						align-items: center;
						justify-content: space-around;
					}
				}
			}
		}

		.submit {
			width: 100%;
			height: 50px;
			padding: 5px 0;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--window-bottom);

			.all_price {
				margin-left: 25px;
				font-size: 20px;
				font-weight: bold;
				color: #fd5c5b;
			}

			.submit_button {
				margin-right: 25px;
				width: 160px;
				height: 40px;
				line-height: 40px;
				font-size: 22px;
				font-weight: bold;
				color: #fff;
				background-color: #24D576;
				border-radius: 18px;
				text-align: center;
			}
		}
	}

	.handle_button {
		background: none;
		height: 70px;

		.one {
			view {
				width: 100% !important;
			}
		}

		.order_button {
			display: flex;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;

			// padding: 10px 0;
			view {
				width: 40%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 16px;
				border-radius: 15px;
				color: #707070;
				background-color: #fff;
			}

			.again_order {
				width: 100%;
				height: 100%;
				background: #07CE67;
				color: #fff;
				border: none;
				padding: 0;
			}

			.finish {
				background: #1bce6b;
				border: none;
				color: #fff;
			}
		}

		.again_button {
			padding: 0;
		}
	}

	.order_type_chex {
		background-color: #24D576 !important;
	}

	.pay_mode {
		.pay_title {
			font-size: 18px;
			font-weight: 500;
			color: #707070;
		}

		.mode {
			height: 113px;
			box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			flex-direction: column;

			.pay_mode_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5px 10px;

				.left {
					display: flex;
					align-items: center;

					.image {
						width: 32.5px;
						height: 32.5px;
						margin-right: 15px;

						>image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}

		.add_submit {
			background-color: #fff;
			text-align: center;
			padding: 15px 0;

			.submit_btn {
				font-size: 16px;
				font-weight: bold;
				display: block;
				width: 200px;
				height: 40px;
				margin: 0 auto;
				line-height: 40px;
				background: #1bce6b;
				border-radius: 20px;
				color: #fff;
			}
		}
	}

	.payy {
		position: fixed;
		top: -20px;
		left: 0;
		padding: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		right: 0;
		flex-direction: column;

		.top_seat {
			flex: 1;
			background: rgba(0, 0, 0, 0.1);
			opacity: 0.5;
			z-index: 100;
			width: 100%;
		}

		.content {
			background-color: #f7f7f7;
			padding: 40rpx;
			width: 100%;
			// height: 270px;
			box-sizing: border-box;

			.head {
				position: relative;

				.money {
					text-align: center;
					color: #9f9f9f;
					font-size: 26rpx;

					>text {
						font-size: 35rpx;
						color: #ff8936;
						font-weight: bold;
					}
				}

				.cancel {
					position: absolute;
					right: 30rpx;
					top: 0;
					color: #9f9f9f;
					font-size: 26rpx;
				}
			}

			.payList {
				padding: 40rpx 0;

				.list {
					display: flex;
					align-items: center;
					padding: 25rpx 30rpx;
					background-color: #fff;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					border: 1rpx solid #ffc948;

					&:last-child {
						border: 1rpx solid #24c373;
					}

					>image {
						width: 60rpx;
						height: 60rpx;
					}

					>text {
						font-size: 25rpx;
						font-weight: bold;
						margin-left: 12rpx;
					}

				}

			}
		}
	}
</style>
